<template>
  <a-card>
    <!-- 创建施工模板 -->
    <div v-show="progressStatus === 0" style="text-align: center;margin-bottom: 50px">
      <a-empty/>
      <a-button type="primary" v-has="'customer:addProgressTemplate'" @click="addProgressTemplate"
                style="margin-top:50px">创建施工进度
      </a-button>
      <add-progress-template ref="addProgressTemplate" @ok="addTemplateOk"></add-progress-template>
    </div>

    <!-- 施工模板甘特图 -->
    <div v-show="progressStatus === 1" class="app-container">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-button type="primary" style="width: 100%" @click="addTask">添加工序</a-button>
        </a-col>
        <a-col :span="12">
          <a-button type="primary" v-has="'customer:deleteAllProgress'" @click="deleteAllProgress"style="width: 100%;margin-left: 10px">删除施工进度</a-button>
        </a-col>
      </a-row>
      <div class="list">
        <van-list
          :finished="finished"
          finished-text="没有更多了"
        >
          <div
            class="customer-list"
            v-for="(item,i) in dataSource"
            :key="i">
            <div>
              <div class="contact">
                <span>任务名称：{{ item.itemName || '无' }}</span>
                <span style="margin-left: 20px;">任务阶段：{{ getDictValue('gh_customer_info_decoration_stage',item.itemStage) }}</span>
              </div>
              <div class="contact">
                <span>开工时间：{{ item.startWorkTime }}</span>
                <span style="margin-left: 20px;">工期：{{ item.workTimeLimit }}</span>
                <span style="float: right;font-size: 20px;font-weight: bold">
                  <a @click.stop="changeShowMenu(item)"><a-icon type="more"/></a>
                </span>
              </div>
              <div class="contact">
                <span>状态：
                  <span v-if="item.startStatus == 1"><a style="color: darkgrey">未开工</a></span>
                  <span v-if="item.startStatus == 2"><a style="color: red">即将开工</a></span>
                  <span v-if="item.startStatus == 3"><a style="color: #2eabff">已开工</a></span>
                  <span v-if="item.startStatus == 4"><a style="color: red">即将超期</a></span>
                  <span v-if="item.startStatus == 5"><a style="color: red">已超期</a></span>
                  <span v-if="item.startStatus == 6"><a style="color: #11da75">已完工</a></span>
                  <span v-if="item.startStatus == 7"><a style="color: red">已暂停</a></span>
                </span>
              </div>
              <div class="contact">
                <span>负责人：{{ item.personInCharge || '无' }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <van-action-sheet
        v-model="showMenu"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @select="selectMenu"
      />

      <editStartWork ref="editStartWork" @ok="modalFormOk()"></editStartWork>
      <addProgressLogModal ref="addProgressLog" @addLogOk="addProgressLogModalOk()"></addProgressLogModal>
      <!--<progressModal ref="progressModal" @ok="modalFormOk"></progressModal>-->
    </div>
    <gan-te-tu-modal ref="ganTeTuModal" @ok="modalFormOk"></gan-te-tu-modal>
    <!--<a-menu :style="menuStyle" v-if="menuVisible">
      <a-menu-item v-show="this.model.startStatus === 1" @click="editStartWork(1, '标记开工')">标记开工</a-menu-item>
      <a-menu-item v-show="this.model.startStatus === 3" @click="editStartWork(2, '标记完工')">标记完工</a-menu-item>
      <a-menu-item @click="deleteGantetu(3)" v-show="this.model.startStatus === 3">
        <a-popconfirm title="确定标记未开工吗?" @confirm="() => editStartWork1(1)">
          <a>标记未开工</a>
        </a-popconfirm>
      </a-menu-item>
      <a-menu-item @click="deleteGantetu(3)" v-show="this.model.startStatus === 6">
        <a-popconfirm title="确定标记未完工吗?" @confirm="() => editStartWork1(3)">
          <a>标记未完工</a>
        </a-popconfirm>
      </a-menu-item>
      <a-menu-item @click="deleteGantetu(3)" v-show="this.model.startStatus === 3">
        <a-popconfirm title="确定暂停工序吗?" @confirm="() => editStartWork1(7)">
          <a>暂停工序</a>
        </a-popconfirm>
      </a-menu-item>
      <a-menu-item @click="deleteGantetu(3)" v-show="this.model.startStatus === 7">
        <a-popconfirm title="确定恢复工序吗?" @confirm="() => editStartWork1(3)">
          <a>恢复工序</a>
        </a-popconfirm>
      </a-menu-item>

    </a-menu>-->
    <progress-info-detail-modal ref="progressInfoDetailModal"></progress-info-detail-modal>
  </a-card>
</template>

<script>
  import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
  import addProgressTemplate from './modules/addProgressTemplate'
  import {getProgressStatus} from "@/api/api";
  import gantt from "dhtmlx-gantt";
  import editStartWork from "./modules/editStartWorkModal"
  import {deleteAction, getAction, putAction} from "@api/manage";
  import ganTeTuModal from "./modules/ganTeTuModal";
  import addProgressLogModal from "./modules/addProgressLogModal"
  import progressInfoDetailModal from './modules/progressInfoDetailModal'
  import moment from 'moment'
  import {filterDictTextByCache} from '@comp/dict/JDictSelectUtil'

  export default {
    name: "costProduction",
    components: {
      addProgressTemplate,
      ganTeTuModal,
      editStartWork,
      addProgressLogModal,
      progressInfoDetailModal,
      //progressModal
    },
    props: {
      customerId: 0,
    },
    data() {
      return {
        progressStatus: 0,
        loading: false,
        currentCustomerId: 0,
        model: {},
        menuVisible: false,
        menuStyle: {
          position: "absolute",
          top: "0",
          left: "0",
          border: "1px solid #eee"
        },
        url: {
          list: "/ghCustomerProgress/list",
          add: "/ghCustomerProgress/add",
          edit: "/ghCustomerProgress/edit",
          delete: "/ghCustomerProgress/delete",

          deleteAllProgress: "/ghCustomerProgress/deleteAllProgress",
        },
        currentTask: {},
        showMenu: false,
        currentMouldId: 0,
        dataSource: [],
        finished: false,
        actions:[],
        defaultActions: [
          {name: '编辑工序', click: 'updateTask'},
          {name: '添加日志', click: 'addProgressLog'},
          {name: '删除工序', click: 'deleteTask'},
          {name: '工序详情', click: 'progressDetail'},
        ],
      }
    },
    created() {
      this.loadData();
      this.getProgressStatus();
    },
    methods: {
      changeShowMenu(item) {
        this.actions = [];
        this.actions = [...this.actions,...this.defaultActions];
        if ([1].includes(item.startStatus)){
          this.actions = [...this.actions, ...[{name: '标记开工',click: 'editStartWork',startStatus: 1}]]
        }
        if ([3].includes(item.startStatus)){
          this.actions = [...this.actions, ...[{name: '标记完工',click: 'editStartWork',startStatus: 2},{name: '标记未开工',click: 'editStartWork1',startStatus: 1},{name: '暂停工序',click: 'editStartWork1',startStatus: 7}]]
        }
        if ([6].includes(item.startStatus)){
          this.actions = [...this.actions, ...[{name: '标记未完工',click: 'editStartWork1',startStatus: 3}]]
        }
        if ([7].includes(item.startStatus)){
          this.actions = [...this.actions, ...[{name: '恢复工序',click: 'editStartWork1',startStatus: 3}]]
        }
        this.showMenu = true;
        this.currentTask = item;
      },
      selectMenu(selectItem) {
        this[selectItem.click](this.currentTask,selectItem.startStatus);
      },
      addProgressLogModalOk() {
        this.$emit("addLog");
      },
      //创建完模板回调
      addTemplateOk(mouldId, event) {
        this.currentMouldId = mouldId;
        this.getProgressStatus();
        this.loadData();
      },
      modalFormOk() {
        this.getProgressStatus();
        this.loadData();
      },
      //检查客户是否以及添加施工进度模板
      getProgressStatus() {
        getProgressStatus({
          customerId: this.customerId
        }).then((res) => {
          this.progressStatus = res.result;
        });
      },
      //打开选择模板弹窗
      addProgressTemplate() {
        this.$refs.addProgressTemplate.add(this.customerId)
        this.$refs.addProgressTemplate.visible = true;
        this.$refs.addProgressTemplate.title = "创建施工进度";
      },

      //工序详情
      progressDetail() {
        this.$refs.progressInfoDetailModal.showDrawer(this.currentTask);
      },

      //标记开工,完工
      editStartWork(currentTask,startStatus) {
        let timeTitle = "";
        let title = ""
        if (startStatus == 1) {
          timeTitle = "开工时间"
          title = "标记开工"
        } else {
          timeTitle = "完工时间"
          title = "标记完工"
        }
        this.$refs.editStartWork.editStartWork(startStatus, timeTitle, currentTask)
        this.$refs.editStartWork.visible = true;
        this.$refs.editStartWork.title = title;
      },
      //标记未开工，未完工，暂停
      editStartWork1(currentTask,startStatus) {
        currentTask.startStatus = startStatus;
        putAction(this.url.edit, currentTask).then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.modalFormOk();
          } else {
            this.$message.warning(res.message);
          }
        });
      },
      //添加日志
      addProgressLog() {
        this.$refs.addProgressLog.title = "添加施工日志";
        this.$refs.addProgressLog.add(this.currentTask)
      },
      //删除工序
      deleteTask(item) {
        if (!this.url.delete) {
          this.$message.error("请设置url.delete属性!")
          return
        }
        let that = this;
        this.$confirm({
          title: "确认删除",
          content: "是否删除数据?",
          onOk: function () {
            that.loading = true;
            deleteAction(that.url.delete, {id: item.id}).then((res) => {
              if (res.success) {
                //重新计算分页问题
                that.$message.success(res.message);
                that.loadData(1);
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.loading = false
            });
          }
        });
      },
      //删除当前客户所有工序
      deleteAllProgress() {
        let that = this;
        this.$confirm({
          title: "确认删除",
          content: "是否删除当前客户所有施工工序？",
          onOk: function () {
            that.loading = true;
            deleteAction(that.url.deleteAllProgress, {customerId: that.customerId}).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.getProgressStatus();
                that.loadData();
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.loading = false;
            });
          }
        });
      },
      formatDateTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? "0" + minute : minute;
        second = second < 10 ? "0" + second : second;
        return y + "-" + m + "-" + d;
      },
      updateTask() {
        this.$refs.ganTeTuModal.title = "编辑工序";
        this.$refs.ganTeTuModal.initPersonInChargeData(this.customerId);
        this.$refs.ganTeTuModal.edit(this.currentTask);
      },
      //自定义新增任务
      addTask() {
        this.$refs.ganTeTuModal.title = "添加工序";
        this.$refs.ganTeTuModal.initPersonInChargeData(this.customerId);
        this.$refs.ganTeTuModal.add(this.currentTask.id, this.currentTask.constructionMouldId, this.customerId);
        return false;
      },
      loadData(arg) {
        if (!this.url.list) {
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        //var params = this.getQueryParams();//查询条件
        this.loading = true;
        getAction(this.url.list, {customerId: this.customerId}).then((res) => {
          if (res.success) {
            this.dataSource = res.result
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      getDictValue(code, value) {
        if (value != null) {
          return filterDictTextByCache(code, value)
        } else {
          return "无"
        }
      },
      getStatus(startStatus){
        if(startStatus === 1){
          return '<a style="color: darkgrey">未开工</a>';
        } else if(startStatus === 2){
          return '<a style="color: red">即将开工</a>';
        } else if(startStatus === 3){
          return '<a style="color: #2eabff">已开工</a>';
        } else if(startStatus === 4){
          return '<a style="color: red">即将超期</a>';
        } else if(startStatus === 5){
          return '<a style="color: red">已超期</a>';
        } else if(startStatus === 6){
          return '<a style="color: #11da75">已完工</a>';
        } else if(startStatus === 7) {
          return '<a style="color: red">已暂停</a>';
        }
      }
    },
  }
</script>

<style scoped scoped lang="less">
  @import '~@assets/less/common.less';

  .select-pk {
    display: flex;
    align-items: center;
    margin: 10px 0;

    & > span {
      font-weight: bold;
    }

    &-text {
      width: calc(100% - 6em);
      height: 30px;
      text-indent: 1em;
      line-height: 28px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
    }
  }

  .list {
    overflow-y: scroll;
    height: 100vh;
    margin-top: 10px;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .customer-list {
    /*display: flex;*/
    align-items: center;
    border-top: 1px solid #d9d9d9;

    .name {
      font-size: 13px;
      color: #161616;
      line-height: normal;
      margin-top: 5px;
    }

    .contact {
      margin-top: 5px;
      font-size: 12px;
      color: #a39f9f;
      margin-bottom: 5px;
    }
  }

  .noExpend {

  }

  .ant-table-row-expand-icon {
    display: none !important;
  }

  .ant-table-row-expand-icon .ant-table-row-collapsed {
    display: none !important;
  }

  /*.app-container {
    height: 2000px;
  }*/

  .fa {
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    padding: 5px;
  }

  .fa：hover {
    opacity: 1;
  }

  .fa-pencil {
    color: #ffa011;
  }

  .fa-plus {
    color: #328EA0;
  }

  .spanCount {
    background: #f4f4f4;
    margin-right: 15px;
    height: 45px;
    padding: 5px;
    border-radius: 5px
  }

  .fa-times {
    color: red;
  }
</style>